<template>
  <div class="fixed-table-table">
    <div class="asset-table-bar">
      <article>
        <el-tag
          v-for="item in $parent.filterItems"
          :key="item.k"
          closable
          type=""
          effect="plain"
          size="mini"
          @close="closeFilterItemTag(item)"
        >
          {{ item.v.label }} ：{{ item.v.valueName ? item.v.valueName : item.v.value }}
        </el-tag>
      </article>
      <section>
        <ul>
          <li v-if="showAdvancedSearch" title="高级搜索">
            <svg-icon icon-class="funnel2" @click="openDrawer" />
          </li>
          <li title="设置">
            <el-dropdown trigger="click">
              <i class="el-icon-setting" />
              <el-dropdown-menu slot="">
                <div class="table-action-switch">
                  <div class="table-action-switch-c">
                    <el-switch
                      v-for="item in columns"
                      :key="item.key"
                      v-model="item.display"
                      :active-text="item.title"
                      @change="onSwitchChange"
                    />
                  </div>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </section>
    </div>
    <el-table
      v-if="showTable"
      ref="pageableTable"
      v-loading="loading"
      :data="data"
      :sortable="sortable"
      :border="border"
      :size="size"
      :height="tableHeight"
      :max-height="tableHeight"
      highlight-current-row
      @sort-change="onSortChange"
      @selection-change="onSelectionChange"
    >
      <!-- @row-click="onRowClick" -->
      <el-table-column v-if="multipleSelected" type="selection" fixed />
      <slot />
    </el-table>
    <pagination :total="total" :page.sync="currentPage" :limit.sync="limit" @pagination="onPaginationChange" />
  </div>
</template>

<script>
import Pagination from '@neu/biz-core/components/Pagination'

/*
  使用该组件业务组件，需要混入databind，达到封装的目的
*/
export default {
  name: 'PageableTable',
  components: {
    Pagination
  },
  props: {
    columns: {
      type: Array,
      default: function() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'mini'
    },
    data: {
      type: Array,
      default: function() {
        return []
      }
    },
    sortable: {
      type: String,
      default: 'custom'
    },
    total: {
      required: true,
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    },
    multipleSelected: {
      type: Boolean,
      default: true
    },
    tableHeight: {
      type: Number,
      default: 0
    },
    showAdvancedSearch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selectionRows: [],
      showTable: true
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    limit: {
      get() {
        return this.pageSize
      },
      set(val) {
        this.$emit('update:pageSize', val)
      }
    }
  },
  mounted() {
    addEventListener('keydown', this.keyDown, false)
    addEventListener('keyup', this.keyUp, false)
  },
  beforeDestroy() {
    // 解绑
    removeEventListener('keydown', this.keyDown)
    removeEventListener('keyup', this.keyUp)
  },
  methods: {
    getEleTable() {
      return this.$refs.pageableTable
    },
    // 触发page-change事件，父组件注册事件(databind混入内置翻页事件处理)，处理相关业务
    onPaginationChange(pageObj) {
      this.$emit('page-change', pageObj)
    },
    // s触发ort-change事件，父组件注册事件(databind混入内置排序事件处理)，处理相关业务
    onSortChange(sortObj) {
      this.$emit('sort-change', sortObj)
    },
    // 触发selection-change事件，父组件注册事件(databind混入内置选择事件处理)，处理相关业务
    onSelectionChange(val) {
      this.$emit('selection-change', val)
      this.selectionRows = val
    },
    // 触发open-drawer事件，父组件注册事件，处理相关业务
    openDrawer() { // 筛选-打开抽屉
      this.$emit('open-drawer')
    },
    // 触发close-filter-item事件，父组件注册事件，处理相关业务
    closeFilterItemTag(item) {
      this.$emit('close-filter-item', item)
    },
    onRowClick(row, column, event) {
      const table = this.$refs.pageableTable
      if (this.CtrlDown) {
        table.toggleRowSelection(row) // ctrl多选 如果点击两次同样会取消选中
        return
      }
      const findRow = this.selectionRows.find(c => c.id === row.id)
      if (findRow) {
        table.toggleRowSelection(row, false)
        return
      }
      table.clearSelection()
      table.toggleRowSelection(row) // 调用选中行方法
    },
    keyDown(event) {
      const key = event.keyCode
      if (key === 17) {
        this.CtrlDown = true
      }
    },
    keyUp(event) {
      const key = event.keyCode
      if (key === 17) {
        this.CtrlDown = false
      }
    },
    onSwitchChange(val) {
      const _this = this
      _this.showTable = false
      _this.$nextTick(() => {
        _this.showTable = true
      })
    }
  }
}
</script>
